<template>
	<nav-bar class="nav-bar">
		<div slot="left" class="back" @click="backClick">
			<img src="~assets/img/common/back.svg" />
		</div>
		<div slot="center" class="nav">
			<div v-for="(item, index) in navItems" class="nav-item" 
			@click="itemClick(index)" 
			:class="{active: index === currentIndex}">
				{{item}}
			</div>
		</div>
	</nav-bar>
</template>

<script>
	import NavBar from 'components/common/navbar/NavBar'
	export default{
		name: "DetailNavBar",
		components: {
			NavBar
		},
		data() {
			return {
				navItems: ['商品', '参数', '评论', '推荐'],
				currentIndex: 0,
			}
		},
		methods: {
			backClick() {
				this.$router.back()
			},
			itemClick(index) {
				this.$emit('btnClick', index)
				this.currentIndex = index
			}
		},
	}
</script>

<style scoped>
	.nav-bar{
		background: #fff;
	}
	.nav{
		display: flex;
		
		font-size: 13px;
		color: #000;
	}
	
	.nav-item{
		flex: 1;
	}
	
	.back img{
		margin-top: 10px;
	}
	
	.active{
		color: var(--color-high-text);
	}
</style>
